<template>
    <div class="login-register-box">
        <div class="login-box">
            <h3>注册</h3>
            <el-form class="form-box" ref="loginRef" :model="form" :rules="rules" size="large">
                <el-form-item label="" prop="userName">
                    <el-input :prefix-icon="User" placeholder="请输入用户名称" v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input type="password" show-password :prefix-icon="Lock" placeholder="请输入用户密码" v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="confirmPass">
                    <el-input type="password" show-password :prefix-icon="Lock" placeholder="请确认密码!" v-model="form.confirmPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="phone">
                    <el-input :prefix-icon="Iphone" placeholder="请输入手机号" :maxlength="11" v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="" prop="phoneCode">
                    <div class="grid-box">
                        <div><el-input :prefix-icon="Message" placeholder="请输入验证码" :maxlength="6" v-model="form.phoneCode" autocomplete="off"></el-input></div>
                        <div><GetCodeBtn></GetCodeBtn></div>
                    </div>
                </el-form-item>
                <div class="grid-box">
                    <div><el-button class="full-box tw-h-[40px]" type="primary" :loading="btnLoading" @click="submitForm(loginRef)">注册</el-button></div>
                    <div><el-button class="full-box tw-h-[40px]" @click="router.push('/login')">返回登录</el-button></div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { User, Lock, Iphone, Message } from '@element-plus/icons-vue'
import GetCodeBtn from '@/components/GetCodeBtn/index.vue'
import { phoneReg } from '@/utils/formValidate'

const emits = defineEmits(['login'])
const router = useRouter()

const btnLoading = ref(false)
const formDataRef = {
    userName: '',
    password: '',
    confirmPass: '',
    phone: '',
    phoneCode: ''
}
const form = reactive(formDataRef)

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (form.checkPass !== '') {
            if (!loginRef.value) return
            loginRef.value.validateField('confirmPass', () => null)
        }
        callback()
    }
}
const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== form.password) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}
const rules = reactive({
    userName: [
        {
            required: true,
            message: '请输入用户名称!'
        }
    ],
    password: [{ validator: validatePass, trigger: 'blur' }],
    confirmPass: [{ validator: validatePass2, trigger: 'blur' }],
    phone: [
        {
            required: true,
            message: '请输入手机号!'
        },
        {
            pattern: phoneReg,
            message: '请输入正确手机号'
        }
    ],
    phoneCode: [
        {
            required: true,
            message: '请输入手机验证码!'
        }
    ]
})
const loginRef = ref(null)

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            btnLoading.value = true
            emits('login', form)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>
<style scoped lang="scss">
.login-register-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    background-image: url('../../img/login/new-login-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding-right: 60px;
    box-sizing: border-box;
    .login-box {
        font-size: 20px;
        width: 420px;
        height: auto;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 30px;
        border-radius: 3px;
        overflow: hidden;
        padding: 30px;
        box-sizing: border-box;
        .login-tit {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
    }
}
.form-box {
    margin-top: 30px;
    padding: 0px;
}
.grid-box {
    width: 100%;
    display: grid;
    grid-template-columns: auto fit-content(110px);
    column-gap: 20px;
}
</style>
